import { Divider, Typography } from 'antd';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

const { Title, Paragraph, Text } = Typography;

const Welcome = () => {
  const { t } = useTranslation();

  return (
    <>
      <Title level={3} italic>
        {t('welcome')}
      </Title>
      <Paragraph>{t('systemInfo')}</Paragraph>
      <Paragraph>
        <Text strong>{t('goal')}</Text>
      </Paragraph>
      <Divider />
      <Title level={3} italic>
        {t('generalInstructionsTitle')}
      </Title>
      <Paragraph>{t('generalInstructions')}</Paragraph>
      <Paragraph>{t('generalInstructionsNote')}</Paragraph>
      <Divider />
      <Title level={3} italic>
        {t('helpfulMessageTitle')}
      </Title>
      <Paragraph>{t('helpfulMessage')}</Paragraph>
      <Title level={5} italic>
        {t('helpfulRemember')}
      </Title>
      <Divider />
      <Title mark level={3} italic>
        {t('instructionsWarning')}
      </Title>
      <Paragraph>{t('instructionsWarningContent')}</Paragraph>
      <Title level={4} italic>
        {t('disclaimer')}
      </Title>
      <Paragraph>{t('disclaimerContent')}</Paragraph>
      <Divider />
    </>
  );
};

export default memo(Welcome);
